<template><div><p><strong>此文章记录了我学习以及工作中遇到的Bug</strong></p>
<h2 id="前端打包后页面为空" tabindex="-1"><a class="header-anchor" href="#前端打包后页面为空"><span>前端打包后页面为空</span></a></h2>
<p>场景：前端打完包后，发给运维，运维部署nginx后，发现报错，页面空白</p>
<p>原因：在vue.config.js文件里的module.exports中有个属性叫做publicPath，这个属性值会变成index.html引入其他文件的src值，默认是/，如果运维在配置nginx容器的时候，路径不是根路径的话，就会报错，找不到要引入的文件，所以此值要写成./,使用相对路径。</p>
<blockquote>
<p>参考：<a href="https://blog.csdn.net/qq_48960335/article/details/123928104" target="_blank" rel="noopener noreferrer">vue打包之后出现空白页的原因以及解决方式_vue打包后打开页面是空白的-CSDN博客</a></p>
</blockquote>
<h2 id="vite环境变量不生效" tabindex="-1"><a class="header-anchor" href="#vite环境变量不生效"><span>VITE环境变量不生效</span></a></h2>
<p>场景: 前端打包后部署在服务器上,报错</p>
<p>原因: 在.env.develop 和.env.product文件中配置的环境变量没有生效, 是因为没有把.env 文件放在了根目录下,而是错误的放在了src文件夹,导致vite启动的时候读不到文件.</p>
<h2 id="后端日期格式化十二小时制" tabindex="-1"><a class="header-anchor" href="#后端日期格式化十二小时制"><span>后端日期格式化十二小时制</span></a></h2>
<p>原因: 日期格式化的时候yyyy-MM-dd HH:mm::ss H要用大写,如果是小写的话h为十二小时制.</p>
<h2 id="网格布局下图片宽高继承失效" tabindex="-1"><a class="header-anchor" href="#网格布局下图片宽高继承失效"><span>网格布局下图片宽高继承失效</span></a></h2>
<p>先上来看一个简单的案例</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        img</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*跟父元素(body)保持相同的宽度*/</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">vh</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*默认的盒子模型,父元素的高度是需要通过子元素来撑开的,所以默认父元素是没有高度的,也就是不能写100%,不然会造成高度塌陷*/</span></span>
<span class="line"><span style="color:#ABB2BF">            object-fit: </span><span style="color:#D19A66">fill</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*默认图片的填充方式,其实不写也没事,这种填充方式是在指定宽高比例和图片宽高比例不一致的填充方式,拉伸图片来完全占满*/</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>我们希望得到一个图片完全占满整个视窗,但是我们运行以后可以发现</p>
<ol>
<li>四周有留白</li>
<li>纵向出现了滚动条</li>
</ol>
<p>这是因为</p>
<ol>
<li>一般浏览器都给body元素设置了一个8px默认外边距</li>
<li>img是行内块元素，默认的图片对齐方式为vertical-align:baseline 基线对齐,所以是会留下基线到底部的空白的</li>
</ol>
<p>如果我们想要实现预想的效果,需要修改为</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        body</span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*清除默认的外边距*/</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#E06C75">        img</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*跟父元素(body)保持相同的宽度*/</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">vh</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*默认的盒子模型,父元素的高度是需要通过子元素来撑开的,所以默认父元素是没有高度的,也就是不能写100%,不然会造成高度塌陷*/</span></span>
<span class="line"><span style="color:#ABB2BF">            object-fit: </span><span style="color:#D19A66">fill</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*默认图片的填充方式,其实不写也没事,这种填充方式是在指定宽高比例和图片宽高比例不一致的填充方式,拉伸图片来完全占满*/</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">block</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*转换为块元素,就不会存在基线和底部的空白了*/</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>再来说回为什么在网格布局下,图片的宽高会有问题,我们先来看一看出问题的程序</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">vh</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*提前预设好高度,防止出现高度塌陷问题*/</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/* 清除默认的外边距 */</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            /*使用网格布局(2x2)*/</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">grid</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-columns: </span><span style="color:#56B6C2">repeat</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-rows: </span><span style="color:#56B6C2">repeat</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#E06C75"> img</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"layout"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width: 100%; height: 100%;"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>我们预想的是实现一个占满整个屏幕的2x2的四分屏图片,现在的问题,这四张图片,组合在一起,出现了滚动条</p>
<p>其实这个问题出现在了**grid-template-columns: repeat(2,1fr);**这句话上面,1fr的其实隐式等于minmax(auto,1fr),也就是说最小值由内容决定,最大值由计算份数所占比例得出,我们图片是有默认高度的,也就是说,当我们图片的默认高度大于由分数计算出来的高度,他会取图片的默认高度来当作高度,而就不是网格布局计算出来的高度,从而导致,网格布局的高度被拉伸</p>
<p>所以我们应该修改为<strong>minmax(0,1fr)</strong>,即下面的代码就为我们想要的结果</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>Document&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E06C75">        body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">vh</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*提前预设好高度,防止出现高度塌陷问题*/</span></span>
<span class="line"><span style="color:#ABB2BF">            margin: </span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/* 清除默认的外边距 */</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            /*使用网格布局(2x2)*/</span></span>
<span class="line"><span style="color:#ABB2BF">            display: </span><span style="color:#D19A66">grid</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-columns: </span><span style="color:#56B6C2">repeat</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            grid-template-rows: </span><span style="color:#56B6C2">repeat</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">2</span><span style="color:#ABB2BF">,</span><span style="color:#56B6C2">minmax</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">,</span><span style="color:#D19A66">1</span><span style="color:#E06C75">fr</span><span style="color:#ABB2BF">));</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#D19A66">        .layout</span><span style="color:#E06C75"> img</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">            width: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            height: </span><span style="color:#D19A66">100</span><span style="color:#E06C75">%</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"layout"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width: 100%; height: 100%;"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        &#x3C;</span><span style="color:#E06C75">img</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"./background3.jpg"</span><span style="color:#D19A66"> alt</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#D19A66"> srcset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">""</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p><a href="https://blog.csdn.net/allway2/article/details/125103965" target="_blank" rel="noopener noreferrer">CSS 网格FR 小数单位概述_1fr-CSDN博客</a></p>
<h2 id="springboot静态资源映射失效" tabindex="-1"><a class="header-anchor" href="#springboot静态资源映射失效"><span>SpringBoot静态资源映射失效</span></a></h2>
<p>场景:想使用SpringBoot做静态资源映射,结果映射不上</p>
<p>原因: SpringBoot静态资源映射本地路径时,要加上file:</p>
<blockquote>
<p><a href="https://blog.csdn.net/weixin_43890033/article/details/120928070" target="_blank" rel="noopener noreferrer">Springboot多种方法处理静态资源：设置并访问静态资源目录_springboot 静态资源-CSDN博客</a></p>
<p><a href="https://cloud.tencent.com/developer/article/2386618" target="_blank" rel="noopener noreferrer">【快学springboot】6.WebMvcConfigurer配置静态资源和解决跨域-腾讯云开发者社区-腾讯云</a></p>
<p><a href="https://www.cnblogs.com/yblue/p/14663712.html" target="_blank" rel="noopener noreferrer">配置本地资源映射路径 addResourceHandlers - Yblue - 博客园</a></p>
</blockquote>
</div></template>


